<template>
   <tablePage></tablePage>
</template>

<script setup lang="ts">
    /***基础组件引入***/
    import { reactive, ref, watch, onMounted, getCurrentInstance, toRefs } from 'vue'
    import draggable from "vuedraggable"
    import tablePage from '@/designer/pc/page/tablePage'
    //import fieldDrag  from './fieldDrag.vue'
    const state = reactive({
        widgetList: [
          {id:'1',type: 'button',  icon: 'grid', name:'栅格'},
          {id:'2',type: 'button',  icon: 'grid', name:'栅格'},
          {id:'3',type: 'button',  icon: 'grid', name:'栅格'}
        ]
    });
    const {
      widgetList
    }  = toRefs(state);

    //拖拽开始的事件
    const onStart = (origin) => {
       console.log("开始拖拽");
        console.log(origin);
    };

    //拖拽结束的事件
    const onEnd = () => {
       console.log("结束拖拽");
      
    };

    const onMove = (e, originalEvent) => {
        //不允许停靠
     //   if (e.relatedContext.element.disabledPark == true) return false;

        return true;
    };

</script>
<style lang="scss" scoped>
   /* 隐藏组件拖拽状态中显示的黑点 */
    :deep(li.container-widget-item), :deep(li.field-widget-item) {
      list-style: none;
    }
</style>

